window.onload = function () {
    var btn = document.querySelector( '.button' );
    var ani = document.querySelector( '.animation' );
    var rev = document.querySelector( '.rev' );

    function spreadAni(obj, opacity, mx, my) {
        obj.style.marginLeft = mx + "px";
        obj.style.marginTop = my + "px";
        obj.style.transform = "scale(200)";
        obj.style.opacity = opacity;
        obj.style.transition = "opacity .2s, transform .2s ease-in";
    }
    function clearAni(obj) {
        obj.style.marginLeft = "-1px";
        obj.style.marginTop = "-1px";
        obj.style.transform = "scale(0.05)";
        obj.style.opacity = 0;
        obj.style.transition = "";
    }

    btn.addEventListener( 'click' , function ( event ) {
        var mx = event.clientX - btn.offsetLeft;
        var my = event.clientY - btn.offsetTop;

        spreadAni(ani, ".3", mx, my);
        setTimeout(function () {
            spreadAni(rev, "1.0", mx, my);
        }, 80);
        setTimeout(function () {
            clearAni(ani);
            clearAni(rev);
        }, 300);
    });
};